<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_事件监听</title>
</head>
<body>
<button onclick="alert('点击了按钮1！')">按钮1</button>
<button id="btn">按钮2</button>
<hr>
<h4>今天星期一</h4>
<span>震惊！Xxx居然在家XXX</span>
<h4>后天星期四</h4>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquid corporis distinctio ducimus error
        esse excepturi molestiae mollitia necessitatibus nisi non odio odit optio pariatur provident quod saepe,
        similique, voluptates.
    </div>
    <div>Atque consequatur cupiditate debitis delectus ducimus eligendi enim, excepturi ipsum magni maxime molestiae
        nostrum, quam quis sapiente voluptas. Dolorum ea iure laboriosam nihil numquam odit officiis sunt tempora
        voluptate voluptatum?
    </div>
    <div>Aliquid aspernatur dolor iure iusto laboriosam molestias necessitatibus, possimus quos suscipit tempore.
        Deserunt distinctio, est facere inventore ipsum laboriosam nisi obcaecati totam? Aspernatur at atque facere
        facilis pariatur, similique. Earum.
    </div>
    <div>Fuga, placeat repellat? Amet asperiores assumenda cumque deserunt dolores eius error eum excepturi harum in
        inventore quidem recusandae repellat repudiandae saepe, vitae voluptatibus. Dolore, excepturi perspiciatis?
        Consequatur doloribus explicabo numquam!
    </div>
    <div>Ad consequatur distinctio, dolorem dolores eum facere facilis hic itaque iusto officia omnis placeat possimus
        praesentium rem, sint tempora tempore vel, velit. At enim exercitationem hic in itaque rem, velit?
    </div>
    <div>A aperiam aspernatur blanditiis culpa, dignissimos dolorem dolorum, ea eaque error est exercitationem expedita
        explicabo id minus quibusdam recusandae veritatis vero voluptatibus! Assumenda consequuntur doloribus explicabo
        ipsum laudantium repellat vel!
    </div>
    <div>Amet aut ea eligendi error expedita fuga id iste laudantium minima, molestias nam, nesciunt nihil nisi
        pariatur, ratione repellendus saepe tenetur ullam unde voluptas? Adipisci aut deserunt dolor error repudiandae!
    </div>
    <div>Aliquam aperiam asperiores atque nulla suscipit. Alias doloremque, dolores et excepturi fugit id nobis nostrum
        omnis pariatur quam qui, ratione recusandae tempora vitae voluptas. Beatae ex facere fugiat quae tempora.
    </div>
    <div>Ab aspernatur consectetur cumque, debitis dolorem error ex itaque non, pariatur perferendis quaerat quis quod
        unde vitae voluptatibus! Aliquam consectetur corporis delectus eum ipsa nihil pariatur, quo similique veniam
        vitae.
    </div>
    <div>Accusamus ad consequuntur ipsam iusto minima officiis quaerat repellendus totam voluptatibus? Amet dignissimos
        et iste, odio officia porro saepe tenetur voluptas. At autem libero rem voluptatibus? Eos ipsa mollitia
        voluptatibus!
    </div>
    <div>Alias aliquam corporis nam neque officia provident quia quidem, rem repellendus rerum. Amet, asperiores
        aspernatur delectus deleniti doloremque illo impedit molestias nam non odit placeat ratione, sed sequi ut
        voluptates?
    </div>
    <div>Aliquam at doloremque ex facilis neque non, omnis qui recusandae? Adipisci consectetur corporis cumque
        excepturi fugiat fugit, ipsum iste iure nisi officiis perspiciatis repudiandae, rerum sunt ullam vitae
        voluptatibus voluptatum?
    </div>
    <div>Delectus, nostrum, voluptas. Asperiores earum eos esse eum laboriosam laudantium libero minima molestias, nihil
        nisi, nostrum optio repudiandae tenetur. Aspernatur beatae debitis delectus deleniti explicabo, officia quidem
        quisquam sapiente sint.
    </div>
    <div>Aliquid aperiam architecto aut dicta, dignissimos esse ex excepturi fugiat fugit inventore iste, molestias nam
        nostrum pariatur quae quibusdam quis quos repellat repellendus reprehenderit saepe sapiente similique, tempore
        voluptate voluptatibus.
    </div>
    <div>At autem blanditiis consequuntur dolore dolores esse expedita explicabo harum illo impedit iure laborum magni
        minus, neque porro quas quia quibusdam quidem quis repellendus sed soluta sunt totam ullam velit?
    </div>
    <div>Ad adipisci aliquid amet architecto assumenda atque blanditiis commodi dolor explicabo fugit illo illum ipsa,
        nihil optio placeat porro saepe sed soluta tempora ut! A architecto deserunt dolores repellat veritatis.
    </div>
    <div>Doloribus est facere fugiat in saepe sit tempora. Adipisci, blanditiis consequuntur cum cumque distinctio est
        illo iste nemo, neque, optio quae quam quasi quidem quisquam quo soluta sunt totam voluptas?
    </div>
    <div>Debitis illum iure magni natus nulla placeat reiciendis reprehenderit temporibus, totam veniam. Assumenda
        delectus deserunt doloremque, eaque eius fuga fugiat, harum laboriosam obcaecati porro quibusdam ratione
        reiciendis rerum, tempora vero!
    </div>
    <div>Atque cumque ea impedit incidunt iure ratione rerum unde? Beatae fuga magnam nam neque non perspiciatis qui
        quis temporibus ullam voluptates? Accusamus blanditiis ea earum laudantium molestias natus saepe tempore?
    </div>
    <div>Beatae blanditiis dignissimos earum est ex. Adipisci aliquam commodi dolore eligendi. Ad aperiam blanditiis
        consectetur debitis dolor eius, est excepturi exercitationem harum magnam maiores molestiae officia quis
        quisquam quod tempore?
    </div>
    <div>Beatae deserunt eaque laudantium necessitatibus pariatur quis, ratione repellat unde! Natus, repudiandae,
        voluptates? Accusantium aperiam, consequatur culpa cumque doloribus magnam magni omnis, placeat quibusdam quidem
        quo reprehenderit tempore totam voluptatem!
    </div>
    <div>Alias ducimus, expedita optio quae sapiente sit soluta? Fuga molestiae nesciunt nulla odit omnis perspiciatis
        voluptatibus! Ab aperiam, aspernatur autem consectetur, consequuntur corporis error esse fugiat molestias
        quaerat velit vero.
    </div>
    <div>A accusantium assumenda consequuntur eos impedit praesentium reiciendis rem repellendus saepe voluptatibus.
        Accusamus accusantium asperiores aspernatur deleniti dolorem. Atque laudantium nihil perferendis reiciendis
        unde. Animi ipsam itaque officia quasi ullam?
    </div>
    <div>Atque consequatur debitis libero nemo nesciunt nihil numquam pariatur provident ratione sapiente. A ad animi
        autem blanditiis consectetur consequuntur cumque dicta enim inventore necessitatibus officiis optio repellat,
        vitae voluptates voluptatum?
    </div>
    <div>Assumenda corporis debitis deleniti dignissimos harum libero non, optio, perferendis perspiciatis quasi sed
        tempore vero. At dignissimos distinctio provident tempora voluptas. Consectetur laudantium maxime perspiciatis
        ratione sint soluta, ut voluptas?
    </div>
    <div>Accusamus aliquam consequuntur culpa dolorem, dolorum et excepturi molestias nostrum obcaecati officia
        recusandae repellat tempore voluptatum? Consectetur cum fugiat magnam nihil non quod reprehenderit. In libero
        nesciunt obcaecati sit suscipit!
    </div>
    <div>Alias at blanditiis dolor doloremque, earum eos explicabo inventore ipsam ipsum iste, magnam necessitatibus
        nesciunt officia sit ut! Blanditiis esse expedita necessitatibus neque! Autem eligendi, quibusdam recusandae
        similique veritatis voluptas!
    </div>
    <div>Corporis dicta illo, iste officia praesentium quidem reiciendis. Animi blanditiis expedita ipsam omnis qui quod
        rem ut voluptas voluptatem voluptates? Aliquid cum quo voluptas? Accusantium cumque dolor dolore nemo velit.
    </div>
    <div>Asperiores corporis error, in itaque laudantium, non officiis quas qui quis sed temporibus unde velit! Ad
        consequatur debitis delectus ducimus eius eligendi, ex facere impedit modi nihil, repudiandae, suscipit
        voluptas!
    </div>
    <div>Ab autem cupiditate est fugit iure, nesciunt perferendis quia reiciendis rem sequi tempora totam? Accusantium
        ad corporis deleniti dignissimos eos fugiat iste iusto libero odio optio perspiciatis provident, ratione,
        similique.
    </div>
    <div>Aliquid animi architecto cumque dolorum ducimus eius error est ex excepturi fuga impedit in ipsa magni minima
        nisi odio quae quos repellat repellendus rerum, sapiente sequi similique soluta velit vero!
    </div>
    <div>Animi debitis dicta eligendi eum excepturi iusto, similique. Deleniti dignissimos doloremque dolores ducimus
        enim ex fugit hic iusto maxime molestias nulla quis, repellat tempora totam ullam unde vero! Id, repudiandae?
    </div>
    <div>Deleniti dolor doloribus, esse et explicabo fugit incidunt, maxime molestias obcaecati officiis placeat
        repellendus saepe tempore ut voluptates! Aliquam amet assumenda debitis dolorem fuga ipsam molestias nobis
        officia suscipit, voluptates?
    </div>
    <div>Aspernatur culpa deleniti eaque excepturi exercitationem, iure libero nihil nobis numquam quaerat, quasi quo,
        saepe temporibus. Accusantium, architecto assumenda deserunt eaque eos laborum laudantium molestiae nesciunt
        nostrum sint tempore tenetur.
    </div>
    <div>Accusamus ad at atque, commodi culpa cum dolore ea eius eligendi eos error eveniet ex harum hic id impedit
        iusto maiores minus officiis quam quas quis sapiente soluta voluptate voluptatem!
    </div>
    <div>Aperiam cum deserunt doloribus inventore ipsa labore minus nemo nesciunt, sapiente, tempore voluptates
        voluptatibus. Ab asperiores eligendi, enim eos ex itaque labore magnam nulla odio omnis optio qui, quibusdam,
        soluta?
    </div>
    <div>Ab animi commodi cumque fugit nisi! Accusamus eveniet expedita harum magnam nisi quae! Ad aliquam incidunt
        repellendus! Amet aspernatur deleniti eos et harum iste quam quas quia recusandae, voluptatum. Minus!
    </div>
    <div>A, accusantium alias aliquam amet architecto dignissimos ea earum et ex incidunt inventore labore minus
        mollitia non, officiis perspiciatis quos rem repellat veritatis voluptatum. Autem ducimus eum eveniet pariatur
        tenetur.
    </div>
    <div>Est excepturi possimus tenetur! Blanditiis debitis doloremque, earum eligendi expedita in ipsam itaque laborum
        magni minima mollitia natus nihil nulla numquam porro quidem quo ratione soluta tempore unde ut veritatis?
    </div>
    <div>A eligendi esse magnam porro quasi quisquam, velit! Alias animi eius libero nam obcaecati, veniam voluptate
        voluptatum? Beatae delectus eius, exercitationem hic perspiciatis possimus quasi quibusdam reiciendis
        repudiandae sequi, ut.
    </div>
    <div>At autem beatae, corporis cumque ea explicabo fugiat impedit molestias neque nisi numquam obcaecati officiis
        perspiciatis porro provident quidem quis ratione reiciendis rem repellat sapiente soluta, sunt tenetur unde
        voluptate!
    </div>
    <div>Cum cumque esse ipsa ipsam nihil, quibusdam quo recusandae reiciendis sequi soluta vitae voluptatibus! At,
        impedit iste labore mollitia natus nobis numquam qui quia quisquam sapiente. Itaque rem sint voluptas.
    </div>
    <div>Ad aliquam animi blanditiis cum debitis deserunt doloremque dolores, eos error explicabo, laudantium magnam
        magni maxime minus molestiae officiis optio porro praesentium quos reiciendis, sit ullam vel veniam veritatis
        voluptas?
    </div>
    <div>Ad animi, at beatae consectetur corporis dolorum ducimus exercitationem facilis labore, laborum libero maiores
        nisi nobis non ratione suscipit vitae. Alias cumque delectus eum ex fugit non sed veniam veritatis.
    </div>
    <div>Asperiores assumenda dolore dolores exercitationem id nemo odit, quibusdam similique unde vitae! Aperiam culpa
        cum dolores in praesentium soluta tenetur. Aliquid animi autem dolor doloremque est impedit modi officia
        suscipit?
    </div>
    <div>A cumque illum ipsam laboriosam nemo nisi omnis sequi unde voluptatibus. Adipisci possimus quaerat saepe
        suscipit. Accusantium cupiditate ex magni vero! Commodi earum incidunt labore molestias numquam provident
        repellat voluptas!
    </div>
    <div>Doloremque doloribus reiciendis tempore voluptatibus! Assumenda culpa distinctio harum minus molestiae natus
        nisi provident quasi quo repellendus! Dicta ea in laudantium libero necessitatibus nesciunt ratione. Ad animi
        facere fuga nesciunt!
    </div>
    <div>A ab amet animi assumenda atque culpa dolorem dolores enim est illo illum iste modi natus nihil non obcaecati,
        provident quasi quibusdam, recusandae repellendus soluta suscipit tempora, temporibus ut voluptas.
    </div>
    <div>Ab animi atque beatae commodi cupiditate deleniti dolor ducimus exercitationem facilis labore laborum, libero
        magnam maiores minima nobis nostrum odio odit officiis placeat porro provident recusandae repellendus
        reprehenderit totam voluptatibus.
    </div>
    <div>Aliquam aut beatae consequuntur cum cupiditate dignissimos, doloribus eligendi est incidunt iste laborum magnam
        nobis numquam pariatur quaerat quod reiciendis, sint sit temporibus vel. Consequatur magnam veniam voluptatem!
        Quisquam, tenetur.
    </div>
    <div>Aliquam illum, repellat? Atque cumque dicta dolorem pariatur perspiciatis recusandae rem, vel vero voluptatem
        voluptates. Delectus ipsum numquam saepe velit voluptatibus. Aperiam illo laudantium necessitatibus numquam quae
        quos rerum voluptatum.
    </div>
    <div>Ad aliquam aliquid asperiores aspernatur autem eaque eos expedita fugiat inventore laboriosam laborum
        laudantium mollitia natus necessitatibus nihil nulla, omnis perspiciatis, provident quam quidem quis ratione
        repellat reprehenderit soluta temporibus?
    </div>
    <div>Aliquam autem dignissimos dolor ex itaque nobis placeat saepe ut. Alias cupiditate eveniet facilis itaque modi
        nobis nulla optio quis! Consequatur doloribus eos officiis quidem quis saepe unde voluptate voluptates!
    </div>
    <div>Architecto labore magnam necessitatibus! Consectetur consequatur, deserunt dignissimos doloremque eius facilis
        itaque laborum laudantium magnam maiores pariatur possimus quam repellat ut vero voluptatem voluptatibus
        voluptatum. Id incidunt natus reprehenderit sunt!
    </div>
    <div>Ab aliquid, asperiores aspernatur beatae consectetur delectus dicta eligendi et exercitationem harum hic
        inventore itaque molestias quia quidem, quis sunt temporibus velit voluptas voluptate! Illum libero maiores
        molestiae rem soluta.
    </div>
    <div>At autem dignissimos dolores, doloribus exercitationem optio placeat repellat saepe! Ad aut blanditiis commodi
        itaque nam nihil non velit? Culpa, dolorum enim eveniet illum in labore obcaecati praesentium quo similique?
    </div>
    <div>Asperiores, assumenda aut culpa deleniti iste quod recusandae repellat ullam. Ab architecto at consequuntur
        corporis, cumque dolorem dolorum ea eum incidunt nemo nesciunt praesentium quae quia quis, quod, suscipit
        temporibus.
    </div>
    <div>Dolorum eligendi explicabo facilis modi porro repellat sapiente voluptates! Animi blanditiis corporis culpa,
        dolore earum eos est et ex hic ipsa libero necessitatibus, nobis numquam officia perferendis quis sint
        temporibus.
    </div>
    <div>Asperiores consectetur dolore facilis ipsam magni nulla, numquam optio perspiciatis quasi recusandae sed
        voluptas. Accusamus ad adipisci, at deleniti doloribus facere harum ipsum laborum non quibusdam quos sequi
        tempora voluptate.
    </div>
    <div>Ab assumenda atque beatae cumque deserunt, dolor dolorem doloribus eos expedita iure modi necessitatibus
        nostrum officia officiis omnis pariatur perspiciatis quaerat, quas quia quidem sed soluta temporibus totam vel
        voluptas?
    </div>
</div>
</div>
<script>
    let btnE = document.querySelector('#btn');
    btnE.addEventListener('click',function (){
        alert('点击了按钮2！');
    });

    let spanE = document.querySelector('span')
    spanE.addEventListener('mouseover',function (){
        alert('该娱乐标题被Xxx用户查看1次！');
    })

    window.addEventListener('scroll',function (){
        alert('页面被滚动了！');
    })
    window.addEventListener('resize',function (){
        alert('页面被重置大小了！');
    })
    document.addEventListener('visibilitychange',function (){
        if (document.visibilityState === 'hidden'){
            console.log('用户离开了页面');
        }else{
            console.log('用户返回了页面');
        }
    })
</script>
</body>
</html>